<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <% String contextPath = request.getContextPath(); 
    request.setAttribute("contextPath", contextPath);%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>个人信息</title>
    
    <script src="${contextPath}/js/jquery.min.js"></script> 

    <!-- Bootstrap Core CSS -->
    <link href="${contextPath}/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="${contextPath}/css/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="${contextPath}/css/sb-admin-2.min.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="${contextPath}/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!--common Css-->
    <link href="${contextPath}/css/common.css" rel="stylesheet">

    <!--information Css-->
    <link href="${contextPath}/css/information.css" rel="stylesheet">
    <link href="${contextPath}/iconfont/iconfont.css" rel="stylesheet">
</head>

<body>

    <div id="wrapper">
         <%@include file="nav.jsp"%>
         
        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h3 class="page-header">个人信息</h3>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-6">
                    <form role="form" class="form-horizontal" method="post" enctype="multipart/form-data" action="">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">账户</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="acountOne" value="${person.account}" disabled="disabled">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">姓名</label>
                            <div class="col-lg-10">
                                <input type="name" class="form-control" id="name" name="name" value="${person.serverName}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="nickname" class="col-sm-2 control-label">昵称</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="nickname" name="nickname" value="${person.nickName}">
                            </div>
                        </div> 
                        <shiro:hasPermission name="employee">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">手机</label>
                            <div class="col-lg-10">
                                    <%-- <p class="form-control-static">${person.phoneNum}<a href="javascript:void(0)" id="editPhone">修改</a></p> --%>
                                    <input type="text" class="form-control" id="phonenumber" name="phonenumber" value="${person.phoneNum}">
                            </div>
                        </div>
                         </shiro:hasPermission>
                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-3">
                                 <button type="button" class="btn btn-default" id="saveOne">保存</button>
                                  <button type="reset" class="btn btn-default" id="cancel">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <h3 class="page-header">设置密码</h3>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-6">
                    <form role="form" class="form-horizontal" method="post" enctype="multipart/form-data" action="">
                        <div class="form-group">
                            <label for="password" class="col-sm-2 control-label">原密码</label>
                            <div class="col-lg-10">
                                <input type="password" class="form-control" id="oldPassword" name="oldPassword">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-sm-2 control-label">密码</label>
                            <div class="col-lg-10">
                                <input type="password" class="form-control" id="password" name="password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="rePassword" class="col-sm-2 control-label">确认密码</label>
                            <div class="col-lg-10">
                                <input type="password" class="form-control" id="rePassword" name="rePassword">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-3">
                                <button type="button" class="btn btn-default" id="commitOne">提交</button>
                                <button type="reset" class="btn btn-default"  id="cancelOne">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- /#page-wrapper -->
        
        
<script type="text/javascript">
	function notice(notice) {
	    var str = '';
	    str += '<div class="popupTip">';
	    str += notice;
	    str += '<span class="glyphicon glyphicon-remove"></span>';
	    str += '</div>';
	    str += '</strong></div>';
	    //wrapper插入str
	    $("#wrapper").append(str);
	}

	//取消提示框
	$("#wrapper").on('click', '.glyphicon-remove', function() {
	    $(".popupTip").hide();
	});

	
	$(function() {
		 //点击保存
		 $("#saveOne").click(function(){
			$(".popupTip").hide();
			var acount = $('#acountOne').val();
			var name = $('#name').val();
			var nickname = $('#nickname').val();
			var phonenumber = $('#phonenumber').val();
		  	$.ajax({
		  	    type: "POST",
		  	    url: "${contextPath}/WebManager/setup/save",
		  	    dataType:'json', 
		  	    contentType: "application/json;charset=utf-8",
		  	    data: "{\"account\":\""+acount+"\",\"serverName\":\""+name+"\",\"nickName\":\""+nickname+"\",\"phoneNum\":\""+phonenumber+"\"}",
		  	    success: function(data){
		  	      if(data.status != 1){
		  	    	    notice("修改成功!");
					}else{
						window.location.href = "${contextPath}/WebManager/setup/personInformation";
						notice("修改失败!");
					}
		  	    }
		  	});
			
	    });
		
	
		//点击取消
		$("#cancel").click(function(){
			$(".popupTip").hide();
			window.location.href = "${contextPath}/WebManager/setup/personInformation";
	    });
		
		 //点击提交
		 $("#commitOne").click(function(){
			$(".popupTip").hide();
			var oldPassword = $('#oldPassword').val();
			var password = $('#password').val();
			var rePassword = $('#rePassword').val();
		  	$.ajax({
		  	    type: "POST",
		  	    url: "${contextPath}/WebManager/setup/commit",
		  	    dataType:'json', 
		  	    contentType: "application/json;charset=utf-8",
		  	    data: "{\"oldPassword\":\""+oldPassword+"\",\"password\":\""+password+"\",\"rePassword\":\""+rePassword+"\"}",
		  	    success: function(data){
		  	    	//alert(data.message);
		  	      if(data.status != 1){
		  	    	    notice("修改成功!");
					}else{
						notice(data.message);
					}
		  	    }
		  	});
	    });
		
		//点击取消
		$("#cancelOne").click(function(){
			$(".popupTip").hide();
			window.location.href = "${contextPath}/WebManager/setup/personInformation";
	    });
		
	
	});

</script>
        

    </div>
    <!-- /#wrapper -->

    <div class="modal fade" id="phoneInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改手机号码</h4>
                </div>
                <div id="notice">
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" method="" action="">
                        <div class="form-group">
                            <div class="center-block">请输入要绑定手机号</div>
                        </div>
                        <div class="form-group">
                            <label for="newPhone" class="col-sm-2 control-label"></label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="newPhone" name="newPhone" placeholder="输入手机号">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"></label>
                            <div class="col-sm-8">
                                <button type="button" class="btn btn-primary btn-lg btn-block" id="next">下一步</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="verify" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">短信验证码</h4>
                </div>
                <div id="msgNotice">
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" method="" action="">
                        <div class="form-group">
                            <div class="center-block" id="desc"></div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"></label>
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="输入验证码">

                                    <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" id="countDown"></button>
                                </span>
                                </div>
                                <!-- /input-group -->
                            </div>
                            <!-- /.col-lg-6 -->
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"></label>
                            <div class="col-sm-8">
                                <button type="button" class="btn btn-primary btn-lg btn-block" id="sure">确定</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="${contextPath}/js/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="${contextPath}/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="${contextPath}/js/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="${contextPath}/js/sb-admin-2.min.js"></script>

    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
        $(function() {
            $('[data-toggle="popover"]').popover();

            $("#editPhone").click(function() {
                $("#phoneInfo").modal('show');
            });

            //下一步点击事件
            $("#next").click(function() {
                //验证是否输入手机号
                var newPhone = $("#newPhone").val();
                if (newPhone === '') {
                    var str = notice('请输入手机号码');
                    $("#notice").html(str);
                } else {
                    $("#phoneInfo").modal('hide');
                    //手机号屏蔽中间四位
                    var phone = newPhone.substr(0, 3) + '****' + newPhone.substr(7)
                    var str = '验证码已经发送到以下手机,请注意查收<br/>';
                    str += phone;
                    $("#desc").html(str);
                    $("#verify").modal('show');

                    var countdown = 60;
                    var obj = $("#countDown");
                    setTime(obj);

                    function setTime(obj) {
                        if (countdown == 0) {
                            $(obj).attr("disabled", false);
                            $(obj).html("获取验证码");
                            countdown = 60;
                            return;
                        } else {
                            $(obj).attr("disabled", true);
                            $(obj).text(countdown + "s 重新发送");
                            countdown--;
                        }
                        setTimeout(function() {
                            setTime(obj)
                        }, 1000);
                    }
                }
            });

            //点击再次发送
            $("#countDown").on('click', function() {
                var countdown = 60;
                var obj = $("#countDown");
                setTime(obj);

                function setTime(obj) {
                    if (countdown == 0) {
                        $(obj).attr("disabled", false);
                        $(obj).html("获取验证码");
                        countdown = 60;
                        return;
                    } else {
                        $(obj).attr("disabled", true);
                        $(obj).text(countdown + "s 重新发送");
                        countdown--;
                    }
                    setTimeout(function() {
                        setTime(obj)
                    }, 1000)
                }
            });

           /*  //点击确定
            $("#sure").click(function() {
                //notice(111);
            });

            //保存个人信息
            $("#save").click(function() {
                
            });

            //设置密码
            $("#commit").click(function() {
               
            }); */

            //提示信息封装函数
            function notice(notice) {
                var str = '';
                str += '<div class="popupTip">';
                str += notice;
                str += '<span class="glyphicon glyphicon-remove"></span>';
                str += '</div>';
                str += '</strong></div>';
                //wrapper插入str
                $("#wrapper").append(str);
            }

            //取消提示框
            $("#wrapper").on('click', '.glyphicon-remove', function() {
                $(".popupTip").hide();
            });
        })
    </script>

</body>

</html>